import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Steps, Button, Row, Col } from 'antd';
import CancelCom from './CancelOrderCom';

function TitleInfo(props) {
  const { id, orders } = props;
  const [item, setItem] = useState({});
  const { orderId, orderNum, orderTime, payMethod, orderState } = item;
  const stepItem = [
    {
      title: '买家下单',
      description: orderTime,
    },
    {
      title: '买家付款',
      description: '',
    },
    {
      title: '商家发货',
      description: '',
    },
    {
      title: '交易成功',
      description: '',
    },
  ];
  const leftCom =
    orderState === '待支付' ? (
      <CancelCom orderId={orderId}></CancelCom>
    ) : orderState === '待发货' ? (
      <div>
        <p style={{ fontSize: 20 }}>等待商家发货</p>
        <Button type='primary'>发货</Button>
      </div>
    ) : orderState === '已发货' ? (
      <div>
        <p style={{ fontSize: 20 }}>已发货，待买家收货</p>
        <p style={{ fontSize: 12 }}>
          买家如在5天6小时46分钟44秒没有申请退款，交易将自动完成
        </p>
      </div>
    ) : orderState === '已完成' ? (
      <div
        style={{
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          marginLeft: 20,
        }}>
        <p style={{ fontSize: 20 }}>交易完成</p>
      </div>
    ) : (
      <div
        style={{
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          marginLeft: 20,
        }}>
        <p style={{ fontSize: 20 }}>交易关闭</p>
      </div>
    );
  const stepCom =
    orderState === '已关闭' || orderState === '售后中' ? (
      ''
    ) : (
      <Steps
        current={
          orderState === '待支付'
            ? 1
            : orderState === '待发货'
            ? 2
            : orderState === '已发货'
            ? 3
            : 4
        }
        labelPlacement='vertical'
        items={stepItem}
      />
    );
  useEffect(() => {
    setItem(orders.filter(el => el.orderId === id)[0]);
  }, [id, orders]);
  return (
    <>
      <Row style={{ marginBottom: 40, fontSize: 14 }}>
        <Col span={4}>订单编号：{orderNum}</Col>
        <Col span={8}>下单时间：{orderTime}</Col>
        <Col span={8}>支付方式：{payMethod}</Col>
      </Row>
      <Row>
        <Col span={9}>{leftCom}</Col>
        <Col span={15}>{stepCom}</Col>
      </Row>
    </>
  );
}

export default connect(
  state => ({ orders: state.orderReducer }),
  {}
)(TitleInfo);
